<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <div class="searchform">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="search"
        size="mini"
        label-width="100px"
        label-position="right">
        <el-form-item prop="pageKey" label="页面唯一标识">
          <el-input v-model="search.pageKey" placeholder="页面唯一标识" class="search-input"/>
        </el-form-item>
        <el-form-item prop="pageName" label="页面名称">
          <el-input v-model="search.pageName" placeholder="页面名称" class="search-input"/>
        </el-form-item>
        <el-form-item prop="isEnable" label="是否启用">
          <r-select v-model="search.isEnable" type="1004" class="form-input" clearable="true"/>
        </el-form-item>
        <br>
        <div style="text-align:center">
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="searchHandle">查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-refresh"
              @click="resetForm('searchForm')">重置
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="table">
      <div class="tableHead">
        <div class="tabletitle">页面配置信息</div>
      </div>
      <!-- 用户列表 -->
      <baseTable
        ref="table"
        @chaneg-size="changeSizeHandle"
        @chaneg-page="changePageHandle"
      >
        <el-table-column label="序号" type="index" min-width="50"/>
        <el-table-column align="center" label="操作" min-width="50" >
          <template slot-scope="scope">
            <el-tooltip class="item" content="编辑" placement="bottom">
              <el-button type="text" style="font-size: 20px;" icon="el-icon-edit-outline" @click="edit(scope.row)"/>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="PAGE_KEY"
          label="页面唯一标识"
          width="150"/>
        <el-table-column
          prop="PAGE_NAME"
          label="页面名称"
          width="150"
        />
        <el-table-column
          prop="PAGE_DESC"
          label="页面描述"
          width="400"/>
        <el-table-column
          prop="IS_ENABLE"
          label="是否启用"
          min-width="100">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.IS_ENABLE === 10041001 ? 'success' : 'primary'"
            >{{ scope.row.IS_ENABLE | isenbleFilter }}
            </el-tag>
          </template>
        </el-table-column>

      </BaseTable>
    </div>
    <!-- 弹框 -->
    <BaseDialog
      ref="dialog"
      width="30%"
      @confirm-handle="submitForm"
      @cancel-handle="cancel"
    >
      <template >
        <div class="elform">
          <el-form
            ref="form"
            :model="form"

            :rules="rules"
            label-position="left"
            label-width="200px"
            class="dialog-form"
          >
            <el-form-item label="页面名称" prop="page_key">
              <el-input v-model="form.page_key" :disabled="true" placeholder="页面唯一标识" class="search-input"/>
            </el-form-item>
            <el-form-item label="页面名称" prop="page_name">
              <el-input v-model="form.page_name" :disabled="true" placeholder="页面名称" class="search-input"/>
              <el-input v-show="false" v-model="form.fieldIds"/>
              <el-input v-show="false" v-model="form.page_id"/>
            </el-form-item>
            <el-form-item label="是否启用" prop="is_enable">
              <Radio v-model="form.is_enable" type="1004"/>
            </el-form-item>
            <el-form-item label="必填字段" prop="FIELD_NAME">
              <checkboxs v-model="form.fieldIds" :url="requiredurl" class="search-input" model="DMSCLOUD_BASEDATA" checkid="FIELD_ID" checkname="FIELD_NAME"/>
            </el-form-item>
            <el-form-item label="显示字段(勾选代表页面不显示)" prop="FIELD_NAME">
              <checkboxs v-model="form.fieldIds" :url="displayurl" model="DMSCLOUD_BASEDATA" checkid="FIELD_ID" checkname="FIELD_NAME"/>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </BaseDialog>

  </div>
</template>

<script>

import { getPageInfo, getPageInfoById, savePageFieldPermission } from '@/api/admin/auth/searchPage'
import BaseTable from '@/components/BaseTable'
import BaseDialog from '@/components/BaseDialog'
import rSelect from '@/components/Select/Select'
import Radio from '@/components/Radio/Radio'
import checkboxs from '@/components/Checkbox/checkbox'
import formMixins from '@/mixins/formMixins'
import _ from 'lodash'

export default {
  name: 'SearchPage',
  components: {
    BaseTable,
    BaseDialog,
    rSelect,
    checkboxs,
    Radio
  },
  // 过滤器
  filters: {
    isenbleFilter(val) {
      return val === 10041001 ? '是' : '否'
    }
  },
  mixins: [formMixins],
  data() {
    return {
      displayurl: '',
      requiredurl: '',
      form: {
        fieldIds: []
      },
      rules: {

      },
      search: {
        limit: 10,
        pageNum: 1,
        pageKey: '',
        pageName: '',
        isEnable: ''
      },
      requiredData: []

    }
  },
  computed: {

  },
  mounted() {
    this.searchHandle()
  },
  methods: {
    searchHandle() {
      const table = this.$refs['table']
      table.wait()
      getPageInfo(this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    // 打开编辑框
    edit(data) {
      this.$refs['dialog'].open('EDIT', this.form)
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        this.form = {}
      })
      const id = data.PAGE_ID
      this.requiredurl = '/basedata/page/' + id + '/pageFiled/required'
      this.displayurl = '/basedata/page/' + id + '/pageFiled/display'
      // 必填字段
      // getPageRequired(id)
      // .then(res => {
      //   this.requiredData = res;

      // })
      // .catch(err => {
      //   //table.complete()
      // });
      // //显示字段(勾选代表页面不显示)
      // getPageDisplay(id)
      // .then(res => {
      //   this.dispalyData = res;
      // })
      // .catch(err => {
      //   //table.complete()
      // });
      // 根据id查询
      getPageInfoById(id)
        .then(res => {
          this.form = _.cloneDeep(res)
          this.form.fieldIds = res.fieldIds.split(',').map(Number)
        })
        .catch(err => {
          // table.complete()
        })
    },

    // 弹框确认按钮
    submitForm(dialog) {
      dialog.wait()
      const params = {
        pageId: this.form.page_id,
        isEnable: this.form.is_enable,
        pageFieldList: this.form.fieldIds
      }
      savePageFieldPermission(params).then(() => {
        dialog.complete().close()
        this.$message({
          type: 'success',
          message: '页面权限保存成功!'
        })
        this.searchHandle()
      }).catch(err => {
        // this.$message({
        //     type: "info",
        //     message: "页面权限保存失败!"
        //   })
        dialog.complete()
      })
    }

  }

}
</script>

<style scoped>
</style>
